<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<u--form ref="uForm" style="padding: 0 20rpx;" label-width="auto" :model="formData" :rules="rules">
				<uni-section title="车辆信息" type="line">
				<view class="formContainer">

					<u-form-item label="车辆信息" required prop="carInfo">
						<view @click.stop="chooseCar">
							<u--input v-model="formData.carInfo" placeholder="请选择车辆" disabled disabledColor="#fff"
								suffixIcon="arrow-right"></u--input>
						</view>
					</u-form-item>
					<u-form-item label="车牌号" required prop="carNo">
						<u--input placeholder="请选择车辆" disabled disabledColor="#fff" v-model="formData.carNo">
						</u--input>
					</u-form-item>
					<u-form-item label="车架号">
						<u--input placeholder="请选择车辆" disabled disabledColor="#fff" v-model="formData.vinNo">
						</u--input>
					</u-form-item>

				</view>
				</uni-section>

				<uni-section title="违章信息" type="line">
					<view class="formContainer">

						<u-form-item label="违章单据号"  required prop="documentNo">
							<u--input placeholder="请输入违章单据号" v-model="formData.documentNo">
							</u--input>
						</u-form-item>
						<u-form-item label="违章时间" required prop="illegalTime">
							<uni-datetime-picker type="datetime" v-model="formData.illegalTime" />
						</u-form-item>
						<u-form-item label="违章地点" required prop="illegalLocation">
							<u--input placeholder="请输入违章地点" v-model="formData.illegalLocation">
							</u--input>
						</u-form-item>
						<u-form-item label="违章类型" required prop="illegalType">
							<uni-data-select v-model.number="formData.illegalType" :localdata="illegalTypes" :clear="false">
							</uni-data-select>
						</u-form-item>
						<u-form-item label="违章扣分" required prop="pointsDeduction">
							<u--input placeholder="请输入扣分" v-model="formData.pointsDeduction" >
							</u--input>
						</u-form-item>
						<u-form-item label="罚款金额" required prop="illegalFines">
							<u--input placeholder="请输入金额" v-model="formData.illegalFines">
							</u--input>
						</u-form-item>
						<u-form-item label="违章内容" required labelPosition="top" prop="illegalDetail">
							<view style="width: 100%;">
								<u--textarea style="width: 100%;" v-model="formData.illegalDetail" placeholder="请输入违章内容" count
									maxlength="500">
								</u--textarea>
							</view>
						</u-form-item>


					</view>
				</uni-section>

				<uni-section title="违章处理" type="line">
					<view class="formContainer">
						<u-form-item label="处理信息" required prop="payPersonType">
							<uni-data-select v-model="formData.payPersonType" :localdata="payPersonTypes"
								:clear="false">
							</uni-data-select>
						</u-form-item>
						<u-form-item label="处理状态" required prop="processingStatus">
							<uni-data-select v-model.number="formData.processingStatus" :localdata="processingStatus"
								:clear="false">
							</uni-data-select>
						</u-form-item>
						<u-form-item label="违章手续费"  required prop="illegalPoundage">
							<u--input placeholder="请输入违章手续费" v-model="formData.illegalPoundage">
							</u--input>
						</u-form-item>
						<u-form-item label="交费总金额"  required prop="totalMoney">
							<u--input placeholder="请输入金额" v-model="formData.totalMoney">
							</u--input>
						</u-form-item>
						<uni-forms-item label="处理附件" labelWidth="150" labelPosition="top">
							<sr-upload ref="upload" maxCount="5" @uploadResult="upload"></sr-upload>
						</uni-forms-item>
					</view>
				</uni-section>
			</u--form>
		</view>
		<button type="info" class="sub-btn" @click="commitIllegal">确认</button>

	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue'
	import * as illegalApi from '@/api/illegal-api.js';
	import settings from '@/settings.js';
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				placeholderStyle: "color:#BFC3CC;font-size:28rpx",
				styles: {
					disableColor: '#ffffff',
					borderColor: '#DCDDDF',
					color: '#333333'

				},
				type: 0,
				illegalTypes: [{
						value: 1,
						text: '未系安全带'
					},
					{
						value: 2,
						text: '压禁止标线'
					},
					{
						value: 3,
						text: '违停'
					},
					{
						value: 4,
						text: '闯红灯'
					},
					{
						value: 5,
						text: '不服从指挥'
					},
					{
						value: 6,
						text: '超速行驶'
					},
					{
						value: 7,
						text: '未设警告标志'
					},
					{
						value: 8,
						text: '未停车让行'
					},
					{
						value: 9,
						text: '未保持车距'
					},
					{
						value: 10,
						text: '未按道行驶'
					},
					{
						value: 11,
						text: '其他'
					}
				],
				//处理信息
				payPersonTypes: [{
						value: 1,
						text: '客户处理'
					},
					{
						value: 2,
						text: '公司处理'
					}
				],
				//处理状态
				processingStatus: [{
						value: 1,
						text: '未处理未缴费'
					},
					{
						value: 2,
						text: '已处理未缴费'
					}, {
						value: 3,
						text: '已处理已缴费'
					}
				],
				formData: {
					illegalDetail: ''
				},
				rules: {
					carInfo: {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择车辆',
						trigger: ['change']
					},
					carNo: {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择车辆',
						trigger: ['change']
					},
					documentNo: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入单据号',
						trigger: ['blur,change']
						
					},
					illegalTime: {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择违章时间',
						trigger: ['change']
						
					},
					illegalLocation: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入违章地点',
						trigger: ['change']
						
					},
					illegalType: {
						type: 'number',
						min: 1,
						required: true,
						message: '请选择违章类型',
						trigger: ['blur', 'change']
						
					},
					pointsDeduction: {
						type: 'number',
						min: 1,
						required: true,
						message: '请输入违章扣分',
						trigger: ['change']
						
					},
					illegalFines: {
						type: 'number',
						min: 1,
						required: true,
						message: '请输入罚款金额',
						trigger: ['change']
						
					},
					illegalDetail: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入违章内容',
						trigger: ['change']
						
					},
					payPersonType: {
						type: 'number',
						min: 1,
						required: true,
						message: '请选择处理信息',
						trigger: ['change']
						
					},
					processingStatus: {
						type: 'number',
						min: 1,
						required: true,
						message: '请选择处理状态',
						trigger: ['change']
						
					},
					illegalPoundage: {
						type: 'number',
						min: 1,
						required: true,
						message: '请输入违章手续费',
						trigger: ['change']
						
					},
					totalMoney: {
						type: 'number',
						min: 1,
						required: true,
						message: '请输入交费总金额',
						trigger: ['change']
						
					}
				}
			}
		},
		onLoad(op) {
			if (op) {
				this.type = op.type;
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '编辑违章' : '新增违章'
				})
			}
			if (this.type == 1) {
				this.formData.id = op.illegalId;
				this.getIllegalDetail();
			}
			uni.$on('illegalCarList', (car) => {
				this.formData.carId = car.carId;
				this.formData.carNo = car.carNo;
				this.formData.vinNo = car.vinNo;
				this.formData.carInfo = car.carInfo;
				this.$forceUpdate();
			})
			
		},
		methods: {
			// 编辑回显获取客户信息
			getIllegalDetail() {
				illegalApi.illegalDetail(this.formData.id).then(res => {
					this.formData = res.data;
					this.formData.illegalDetail = this.formData.illegalDetail || '';
					if (!this.$u.test.isEmpty(this.formData.imgList)) {
						let url = settings.baseImageUrl + this.formData.imgList;
						this.$refs.upload.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.imgList
						}]
					}
				})
			},
			// 选择车辆
			chooseCar() {
				if (this.type == 0) {
					uni.navigateTo({
						url: './carList'
					})
				} else {
					uni.$u.toast('车辆信息不可编辑')
				}

			},
			// 处理附件
			upload(data) {
				this.formData.imgList = data;
				this.$forceUpdate();
			},
			// 提交违章信息
			commitIllegal() {

				this.$refs.uForm.validate().then(res => {
					if (this.type == 1) {
						illegalApi.editIllegal(this.formData).then((response) => {
							this.$u.toast('编辑成功')
							uni.$emit('refreshIllegalList');
							uni.navigateBack({})
						})
					} else {
						illegalApi.addIllegal(this.formData).then((response) => {
							this.$u.toast('新增成功')
							uni.$emit('refreshIllegalList');
							uni.navigateBack({})
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})



			}
		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
